/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
} from 'react-native';

import {
  StackNavigator,
} from 'react-navigation';


//对应的相应的显示底部导航
import TabNavigator from 'react-native-tab-navigator';

import BoyComponent from './pages/BoyComponent'

export default class App extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectedTab: 'tb_popular',
        };
    }
    render() {
        return (
            <View style={styles.container}>

                <Navigator
                    initialRoute={{
                        component: BoyComponent,
                    }}
                    renderScene={(router, navigator) =>{
                        let Component = router.component;
                        return <Component navigator={navigator} {...router.params} />
                    }}
                ></Navigator>


                {/*<TabNavigator>*/}
                    {/*<TabNavigator.Item*/}
                        {/*selected={this.state.selectedTab === 'tb_popular'}*/}
                        {/*selectedTitleStyle={{color:'red'}}*/}
                        {/*title="最热"*/}
                        {/*renderIcon={() => <Image style={styles.imageTab} source={require('./images/ic_polular.png')}/>}*/}
                        {/*renderSelectedIcon={() => <Image style={[styles.imageTab, {tintColor: 'red'}]} source={require('./images/ic_polular.png')}/>}*/}
                        {/*badgeText="1"*/}
                        {/*onPress={() => this.setState({selectedTab: 'tb_popular'})}>*/}

                        {/*<BoyComponent/>*/}

                    {/*</TabNavigator.Item>*/}
                    {/*<TabNavigator.Item*/}
                        {/*selected={this.state.selectedTab === 'tb_trending'}*/}
                        {/*title="趋势"*/}
                        {/*renderIcon={() => <Image style={styles.imageTab} source={require('./images/ic_trending.png')}/>}*/}
                        {/*renderSelectedIcon={() => <Image style={[styles.imageTab, {tintColor: 'yellow'}]} source={require('./images/ic_trending.png')}/>}*/}
                        {/*// renderBadge={() => <CustomBadgeView />}*/}
                        {/*onPress={() => this.setState({selectedTab: 'tb_trending'})}>*/}
                        {/*<View style={styles.page2}>*/}

                        {/*</View>*/}
                    {/*</TabNavigator.Item>*/}
                    {/*<TabNavigator.Item*/}
                        {/*selected={this.state.selectedTab === 'tb_favorite'}*/}
                        {/*selectedTitleStyle={{color:'red'}}*/}
                        {/*title="收藏"*/}
                        {/*renderIcon={() => <Image style={styles.imageTab} source={require('./images/ic_polular.png')}/>}*/}
                        {/*renderSelectedIcon={() => <Image style={[styles.imageTab, {tintColor: 'red'}]} source={require('./images/ic_polular.png')}/>}*/}
                        {/*onPress={() => this.setState({selectedTab: 'tb_favorite'})}>*/}
                        {/*<View style={styles.page1}>*/}
                        {/*</View>*/}
                    {/*</TabNavigator.Item>*/}
                    {/*<TabNavigator.Item*/}
                        {/*selected={this.state.selectedTab === 'tb_my'}*/}
                        {/*title="我的"*/}
                        {/*renderIcon={() => <Image style={styles.imageTab} source={require('./images/ic_trending.png')}/>}*/}
                        {/*renderSelectedIcon={() => <Image style={[styles.imageTab, {tintColor: 'yellow'}]} source={require('./images/ic_trending.png')}/>}*/}
                        {/*// renderBadge={() => <CustomBadgeView />}*/}
                        {/*onPress={() => this.setState({selectedTab: 'tb_my'})}>*/}
                        {/*<View style={styles.page2}>*/}

                        {/*</View>*/}
                    {/*</TabNavigator.Item>*/}
                {/*</TabNavigator>*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    page1: {
        flex: 1,
        backgroundColor: 'red',
    },
    page2: {
        flex: 1,
        backgroundColor: 'yellow',
    },

    imageTab: {
        height: 22,
        width: 22,
    }
});
